<template>
    <div class='interest-container'>
        <div class="main">
            <ul class="member" v-if="memberInfoList.length > 0">
                <li class="member-item" v-for="memberInfo in memberInfoList">
                    <div class="head-img">
                        <img @click="goMemberIndex(memberInfo.memberId)" :src="memberInfo.header" alt="">
                    </div>
                    <div class="nickname">
                        <span>{{ memberInfo.nickname }}</span>
                    </div>
                    <div class="online">
                        <span v-if="memberInfo.online" style="color: #41b883;">当前在线</span>
                        <span v-if="memberInfo.online == false">
                            用户于 <span style="color: #ff4000">{{ getTime(memberInfo.lastLoginTime) }}</span> 来过
                        </span>
                    </div>
                    <div class="option">
                        <div @click="goMemberIndex(memberInfo.memberId)">进入首页</div>
                        <div @click="deleteInterest(memberInfo.memberId)">取消关注</div>
                    </div>
                    <div @click="exchange(memberInfo.memberId)" class="exchange">交流</div>
                </li>
            </ul>
            <el-empty v-if="memberInfoList.length == 0" :image-size="400" description="暂无关注哦!"></el-empty>
        </div>
    </div>
</template>
<script>

import { timestampToTime } from "../../utils/util";
import getUUID from "../../utils/uuid";

export default {
    name: 'interest',
    data() {
        return {
            memberInfoList: [],
            memberVo: [],
        };
    },
    components: {
    },
    methods: {

        // 取消关注
        deleteInterest(memberId) {
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/memberinterest/deleteInterest?memberId=${this.memberVo.id}&beingMemberId=${memberId}`),
                method: 'post'
            }).then(({ data }) => {
                let status = (data.code == 200);
                this.$message({
                    type: status ? 'success' : 'warning',
                    message: data.message
                })
                if (status) {
                    this.getInterests(this.memberVo.id)
                }
            })
        },

        // 交流
        async exchange(memberId) {
            // 创建交流的 
            await this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/sendreceive/createSendReceive?memberId=${this.memberVo.id}&beingMemberId=${memberId}`),
                method: 'post',
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$router.push({
                        path: '/member/membersetting/exchange',
                        query: {
                            temp_to: memberId,
                            params: getUUID()
                        }
                    })
                }
            })


        },

        // 前往用户首页
        goMemberIndex(memberId) {
            this.$router.push({
                path: '/member/othermember',
                query: {
                    memberId: memberId,
                    params: getUUID()
                }
            })
        },

        getTime(lastLoginTime) {
            return timestampToTime(lastLoginTime)
        },

        getInterests(memberId) {
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/memberinterest/getInterest?memberId=${memberId}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.memberInfoList = data.data == null ? [] : data.data
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        }

    },
    async created() {
        let member = await this.$memberInfo();
        if (member != null) {
            this.memberVo = member;
            this.getInterests(this.memberVo.id)
        }
    }
}
</script>

<style scoped>
@import url('../../utils/css/interest.css');
</style>
